import React from "react"

// 直接使用函数参数默认值
// function Test1({pageSize = 10}){
//     return <div>此处展示props默认值{pageSize}</div>
// }

/**
 * # 生命周期 #
 * 定义：组件的生命周期是指组件从被创建到挂载到页面中运行起来，再到组件不用时卸载的过程。
 * 注意：只有类组件才有生命周期（类组件 实例化 函数组件 不需要实例化）
 * 一共三个阶段: 挂载、更新、卸载。 
 * ## 一、挂载阶段
 *      1. constructor : 创建组件时，最先执行，初始化的时候只执行一次 
 *             作用：① 初始化state ② 创建ref ③ 使用bind 解决this指向问题等
 *      2. render : 每次组件渲染都会触发  
 *             作用：① 渲染UI （注意：不能在里面调用setState()）
 *      3. componentDidMount : 组件挂载（完成DOM渲染）后执行，初始化的时候执行一次 
 *             作用：① 发送网络请求 ② DOM操作
 * ------------------------------------------------------------------------------------
 * ## 二、更新阶段
 *      1. render : 每次组件渲染都会触发
 *             作用：渲染UI（与挂载阶段 是同一个render）
 *      2. componentDidUpdate : 组件更新后（DOM渲染完毕）
 *              作用： DOM操作，可以获取到更新后的dom内容，不要直接调用setState
 * ------------------------------------------------------------------------------------
 * ## 三、卸载阶段（销毁阶段）
 *      1. componentWillUnmount : 组件卸载（从页面消失）
 *              作用：执行清理工作（比如：清理定时器等）
 */ 
class Test1 extends React.Component {
    // 使用类静态属性声明默认值
    static defaultProps = {
        pageSize: 11
    }
    render(){
        return (
            <div>此处展示props默认值：{this.props.pageSize}</div>
        )
    }
}
export default Test1